<template>
  <!-- 判断是否满足开店的条件弹窗 -->
  <div class="isvip" @click="hide()">
    <div class="isvip_win" @click.stop>
      <div class="isvip_head">开通个人微店需满足以下条件</div>
      <div class="isvip_con">
        <div class="isvip_list">
          <span>1、开通永久达人</span>
        </div>
        <div class="isvip_list">
          <span>2、认证身份</span>
        </div>
      </div>
      <div class="isvip_group">
        <div class="btn_list" @click="toPage(0)">去认证</div>
        <div class="btn_list" @click="toPage(1)">去开通VIP</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    hide(){
        this.$emit("hdieVip")
    },
    toPage(types) {
      this.$emit("toPage", types);
    }
  },
  components: {}
};
</script>

<style lang='less'>
.isvip {
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  .isvip_win {
    height: 40vw;
    width: 60vw;
    background: #fff;
    border-radius: 10px;
    .isvip_head {
      height: 13vw;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 0.8rem;
      color: #888;
      padding-left: 1rem;
    }
    .isvip_con {
      height: 17vw;
      width: 100%;
      border-bottom: 1px solid #efefef;
      .isvip_list {
        height: 50%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 0.9rem;
        span {
          text-align: left;
          width: 60%;
        }
      }
    }
    .isvip_group {
      height: 10vw;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 0.9rem;
      color: @actColor;
      .btn_list {
        width: 50%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        &:nth-child(1) {
          border-bottom-left-radius: 10px;
        }
        &:nth-child(2) {
          border-bottom-right-radius: 10px;
        }
        &:active {
          background: #efefef;
        }
      }
    }
  }
}
</style>
